
html {
	height: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	background: black;
	font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
body.loading {
	display: none;
}
#app {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transition: all 0.3s ease;
	-webkit-transition-property: -webkit-transform, height, bottom;
}
#app.reduce {
	-webkit-transform: translate3d(0,20px, 0);
	/*bottom: 20px;*/
}
#alert {
	position: absolute;
	width: 100%;
	height: 20px;
	top: 0px;
	left: 0px;
	overflow: hidden;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: bold;
	color: #bfbfbf;
	line-height: 20px;
	text-align: center;
	z-index: -1;
	padding: 0 4px;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-animation: fadeInSmall 0.3s ease;
}
#alert.up {
	-webkit-animation: fadeUpSmall 0.3s ease;
}
.weather {
	width: 100%;
	position: absolute;
	top: 40%;
	margin-top: -67px;
	-webkit-animation: fade 0.3s ease-in-out;
	-webkit-transform: translate3d(0,0,0);
	cursor: pointer;
}
.weather .icon {
	width: 184px;
	height: 134px;
	margin: 0 auto;
	background-image: url(canvas.png);
	-webkit-mask-box-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, white 50%, rgba(0,0,0,0.5) 50%, black 100%);
	-webkit-transform: scale(0.8);
	-webkit-mask-box-image: -webkit-linear-gradient(white, rgba(255,255,255,0.75));
	-webkit-transition: all .250s ease-out;
}
.weather .icon, .info {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: icon;
	-webkit-animation-duration: 0.5s;
	-webkit-mask-box-image: -webkit-linear-gradient(white, rgba(255,255,255,0.75));
}
.info {
	-webkit-animation-name: flipInY;
}
@-webkit-keyframes icon {
    0% {
        -webkit-transform: perspective(60px) rotateY(90deg) scale(0.8);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: perspective(100px) rotateY(0deg) scale(0.8);
        opacity: 1;
    }
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(60px) rotateY(90deg);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: perspective(100px) rotateY(0deg);
        opacity: 1;
    }
}
.weather .icon.cloud, .weather .icon.mostly_cloudy {
	width: 184px;
}
.weather .icon.partlycloud, .weather .icon.partly_sunny {
	width: 151px;
	background-position: -184px 0px;
}
.weather .icon.chance_of_storm {
	width: 113px;
	background-position: -335px 0px;
}
.weather .icon.showers, .weather .icon.lightrainsun, .weather .icon.sleetsun {
	width: 136px;
	background-position: -448px 0px;
}
.weather .icon.rain, .weather .icon.mist, .weather .icon.lightrain  {
	width: 159px;
	background-position: 0px -134px;
}
.weather .icon.snowsun {
	width: 129px;
	background-position: -159px -134px;
}
.weather .icon.storm {
	width: 151px;
	background-position: -288px -134px;
}
.weather .icon.rainthunder, .weather .icon.snowthunder {
	width: 134px;
	background-position: -439px -134px;
}
.weather .icon.lightrainthundersun, .weather .icon.sleetsunthunder, .weather .icon.snowsunthunder, .weather .icon.lightrainthunder, .weather .icon.sleetthunder  {
	width: 121px;
	background-position: 0px -268px;
}
.weather .icon.snow, .weather .icon.sleet, .weather .icon.flurries, .weather .icon.icy  {
	width: 147px;
	background-position: -121px -268px;
}
.weather .icon.fog, .weather .icon.smoke, .weather .icon.haze, .weather .icon.dust {
	width: 196px;
	background-position: -268px -268px;
}
.weather .icon.sun, .weather .icon.lightcloud, .weather .icon.mostly_sunny {
	width: 134px;
	background-position: -464px -268px;
}
.info {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: white;
	margin-top: 12px;
	-webkit-transition: all .250s ease-out;
	text-transform: capitalize;
}
.info span {
	font-family: HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-transform: none;
}
.loading {
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -5px;
	margin-top: -5px;
	background: white;
	border-radius: 100px;
	-webkit-animation: rotate 1.2s ease-in-out infinite;
	-webkit-mask-box-image: -webkit-linear-gradient(white, rgba(255,255,255,0.75));
	z-index: 999;
}
h3 {
	position: absolute;
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, .3);
	text-align: right;
	right: 0px;
	margin: 0px;
	bottom: -1px;
	padding: 40px;
	cursor: pointer;
	z-index: 9999;
	-webkit-transition: all .250s ease-out;
}
h3:hover {
	color: white;
}
#box {
	width: 100%;
	height: 100%;
	position: relative; 
	-webkit-perspective: 1200px; 
}
#layer {
	width: 100%; 
	height: 100%; 
	position: absolute; 
	-webkit-transform-style: preserve-3d; 
	-webkit-transition-property: -webkit-transform; 
	-webkit-transition-duration: 550ms; 
	-webkit-transition-timing-function: ease-out; 
	-webkit-transition-delay: initial;
	top: 0px; 
	left: 0px;
}
#layer.fast {
	-webkit-transition-duration: 250ms;
}
#settings {
	position: absolute;
	width: 70%;
	height: 100%;
	background: -webkit-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.5)), url(texture.jpg) repeat;
	background: #222;
	display: none;
	top: 0px;
	right: 0px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 550ms;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-delay: initial;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 1;
}
#settings.over {
	box-shadow: rgba(0,0,0,0.75) 0px 10px 40px inset;
}
/*#settings::after {
	content: '';
	background: -webkit-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.5));
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}*/
#settings .content {
	-webkit-transform: translate3d(0,0,0);
}
#settings h2 {
	color: rgba(255,255,255,0.82);
	font-size: 12px;
	text-transform: uppercase;
	text-shadow: rgba(0,0,0,0.7) 0px 1px 0px;
	margin: 0px;
	width: 100%;
	padding-left: 15px;
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
	background: rgba(0,0,0,0.15);
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	box-shadow: rgba(255,255,255,0.1) 0px 1px 0px, rgba(255,255,255,0.1) 0px 1px 0px inset;
}
#settings h2:first-child {
	border-top: none;
	margin-top: 0px;
	box-shadow: rgba(255,255,255,0.1) 0px 1px 0px;
	background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.15));
}
#settings ul {
	width: 100%;
	/*margin: 20px auto 0;
	padding: 0px;*/
	list-style: none;
	/*background: #111;*/
	/*background: rgba(0,0,0,0.3);
	box-shadow: rgba(0,0,0,0.45) 0px 7px 12px -6px inset;
	border: 1px solid #333;
	border-radius: 7px;*/
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
#settings ul:last-child {
	margin-bottom: 40px;
}
#settings li {
	border-bottom: 1px solid rgba(0,0,0,0.75);
	box-shadow: 0px 1px 0px rgba(255,255,255,0.1);
	padding-left: 15px;
	font-size: 17px;
	color: rgba(255,255,255,0.65);
	font-family: HelveticaNeue-Light;
	position: relative;
	z-index: 10;
	height: 48px;
	line-height: 48px;
	padding-right: 15px;
}
#settings li:last-child {
	box-shadow: none;
	border-bottom: none;
}
#settings .cities li {
	padding: 0px;
}
.cities li span, .colors li span {
	position: absolute;
	display: block;
	left: 15px;
	top: 50%;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	background-color: lightblue;
	background-image: -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4));
	box-shadow: rgba(255,255,255,0.4) 0px 1px 0px inset, rgba(0,0,0,0.5) 0px 3px 4px;
	border-radius: 3px;
}
#settings .colors li span {
	position: relative;
	float: left;
	left: auto;
	top: auto;
	margin-top: 12px;
	width: 25%;
	box-sizing: border-box;
	border-radius: 0px;
	box-shadow: rgba(255,255,255,0.4) 0px 1px 0px inset, rgba(0,0,0,0.5) 0px 5px 4px -2px;
}
#settings .colors li span:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
#settings .colors li span:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
#settings .colors li {
	overflow: hidden;
	opacity: 0.6;
	-webkit-transition: -webkit-filter 0.5s ease;
	-webkit-transition-property: -webkit-filter, opacity;
	-webkit-filter: grayscale(1);
}
.credits li span {
	display: block;
	position: absolute;
	width: 105px;
	height: 58px;
	background: url('canvas.png');
	background-position: 0px -515px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -53px;
	margin-top: -29px;
}
#settings .credits li {
	height: 148px;
}
#settings .colors li.current {
	opacity: 1;
	-webkit-filter: none;
}
#settings .colors li.current::after {
	display: none;
}
#settings input {
	padding: 15px 15px 15px 55px;
	border-radius: 0px;
	margin: 0px;
	background: transparent;
	display: block;
	border: none;
	color: rgba(255,255,255,0.7);
	-webkit-appearance: none;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	text-transform: capitalize;
	font: normal 17px HelveticaNeue-Light, Helvetica;
}
#settings input:focus {
	color: #fff;
	font-weight: bold;
	font-family: HelveticaNeue, Helvetica;
	outline: none;
}
#settings input:focus {
	background-image: -webkit-linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.2));
}
#settings .cities li {
	text-transform: capitalize;
	position: relative;
}
#settings .cities li::after, #settings li.current::after {
	content: '';
	position: absolute;
	display: block;
	width: 10px;
	height: 14px;
	top: 50%;
	right: 10px;
	margin-top: -7px;
	background: url(canvas.png) no-repeat -24px -402px;
	opacity: 0.25;
}
#settings li.current::after {
	width: 14px;
	height: 14px;
	background-position-x: -34px;
}
.notification {
	top: 20px;
	left: 50%;
	width: 320px;
	margin-left: -160px;
	background: #fff;
	background: -webkit-linear-gradient(#fff, #dbdbdb);
	border-radius: 14px;
	box-shadow: white 0px -1px 0px inset, rgba(0,0,0,0.5) 0px 4px 30px;
	position: absolute;
	z-index: 1;
	max-height: 529px;
	text-shadow: white 0px 1px 0px;
	font: normal 12px HelveticaNeue, Helvetica, Arial, sans-serif;
	-webkit-text-stroke: 1px transparent;
	min-height: 50px;
	-webkit-animation: down 0.3s ease-in-out;
	z-index: 99999;
}
.notification small {
	margin-top: 3px;
	margin-bottom: 0px;
	opacity: 0.4;
	font-size: 9px;
	display: block;
}
.notification.up {
	-webkit-animation: up 0.3s ease-in-out;
	opacity: 0;
}
.notification:after {
	content: '';
	background: #c1c1c1;
	box-shadow: white 1px 0px 0px;
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 50px;
}
.notification strong {
	text-transform: capitalize;
}
.notification .right {
	width: 270px;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 10px;
}
.notification .left {
	height: 100%;
	width: 30px;
	height: 30px;
	position: absolute;
	background-image: url(canvas.png);
	background-position: -300px -480px;
	left: 10px;
	top: 50%;
	margin-top: -15px;
}
.notification .right {
	margin-left: 50px;
}
.notification h2 {
	font-size: 14px;
	margin: 0px;
}
.notification p {
	margin: 0px;
}
a.in {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 50px;
	display: block;
	padding: 0px;
	margin: 0px;
	z-index: 1;
	text-indent: -999px;
	overflow: hidden;
	-webkit-transition: all .250s ease-out;
	-webkit-transform: translate3d(0,0,0);
	height: 50px;
}
a.in::after {
	content: '';
	position: absolute;
	display: block;
	width: 20px;
	height: 15px;
	right: 14px;
	top: 14px;
	background: url(canvas.png) no-repeat;
	background-position: 0px -500px;
}
.pagination {
	position:absolute;
	z-index: 999;
	width: 100%;
	text-align: center;
	bottom: 40px;
	-webkit-transition: all .250s ease-out;
}
.pagination span {
	display: inline-block;
	height: 6px;
	width: 6px;
	background: rgba(0,0,0,0.12);
	margin-right: 10px;
	border-radius: 20px;
	cursor: pointer;
}
.pagination span:first-child {
	height: 8px;
	width: 8px;
	border-radius: 0px;
	background: url(canvas.png) no-repeat -16px -410px;
	top: 1px;
	position: relative;
}
.pagination span.active:first-child {
	background: url(canvas.png) no-repeat -16px -402px;
}
.pagination span.active {
	background: #fff;
	cursor: default;
}
.pagination span:hover {
	background: rgba(0,0,0,0.4);
}
.pagination span:first-child:hover {
	background: url(canvas.png) no-repeat -16px -402px;
}
.pagination span:last-child {
	margin-right: 0px;
}
/*.forecast {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	width: 300px;
	height: 180px;
	width: 100%;
	top: 51%;
	margin-top: -90px;
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.96) 100%);
	background: inherit;
	background-image: rgba(0,0,0,0.95);
	/*box-shadow: rgba(0,0,0,0.4) 0px 0px 40px inset;*!/
	-webkit-transform-style: preserve-3d; 
	-webkit-transition-property: -webkit-transform; 
	-webkit-transition-duration: 250ms; 
	-webkit-transition-timing-function: ease-out; 
	-webkit-transition-delay: initial; 
	z-index: -1;
	display: none;
}*/

.chart {
	width: 100%;
	overflow: hidden;
	box-shadow: rgba(255,255,255,0.15) 0px 1px 0px;
	margin-top: -1px;
	z-index: 1;
	position: relative;
	background-image: -webkit-linear-gradient(
	rgba(255,255,255,0.2) 1px, 
	transparent 2px), -webkit-linear-gradient(0deg, 
	rgba(255,255,255,0) 1px, 
	transparent 2px), -webkit-linear-gradient(
	rgba(255,255,255,.06) 1px, 
	transparent 1px), -webkit-linear-gradient(0deg, 
	rgba(255,255,255,.06) 1px, 
	transparent 1px);
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position: -2px -2px;
	height: 295px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	
}
@media all and (orientation:landscape) {
	.chart {
		border-radius: 10px;
		height: 300px;
		border-bottom: none;
		box-shadow: none;
	}
}
.scroll {
	position: absolute;
	top: 295px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	-webkit-overflow-scrolling: touch;
	overflow: scroll;
}
.scroll > * {
    -webkit-transform: translateZ(0px);
}
.scroll ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.scroll > ul > li {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	box-shadow: rgba(255,255,255,0.15) 0px 1px 0px;
	height: 80px;
	position: relative;
	-webkit-transition: -webkit-transform 0.25s ease;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transition: all 0.25s ease;
	overflow: hidden;
}
.scroll > ul > li.move {
	-webkit-transform: translateY(108px);
}
.scroll > ul > li:nth-child(even) {
	background: rgba(0,0,0,0.04);
}
.scroll > ul > li > * {
	opacity: 0.65;
	-webkit-transition: opacity 0.25s ease;
}
.scroll > ul > li.active {
	opacity: 1;
	box-shadow: none;
	border-color: rgba(255,255,255,0.15);
	height: 180px;
}
.scroll > ul > li .overlay {
	height: 80px;
	position: relative;
}
.scroll > ul > li.active .overlay {
	box-shadow: #000 0px 1px 0px, rgba(255,255,255,0.1) 0px 2px 0px;
}
.scroll > ul > li.active * {
	opacity: 1;
}
.scroll > ul > li ul.underlay {
	height: 100px;
	position: relative;
	background: #222 url(texture.jpg) repeat;
	box-shadow: black 0px 20px 20px -20px inset;
	overflow: scroll;
	width: 100%;
	white-space:nowrap;
	-webkit-transition: all 0.25s ease;
}
.scroll > ul li.active ul.underlay {
	box-shadow: rgba(255,255,255, 0.15) 0px -1px 0px, rgba(0,0,0,0.6) 0px 50px 40px -40px inset, rgba(0,0,0,0.6) 0px -40px 40px -40px inset;
}
.forecast .scroll > ul > li ul.underlay .icon {
	-webkit-transform: scale(0.4);
}
.scroll > ul > li ul.underlay::-webkit-scrollbar, #settings::-webkit-scrollbar {  
	display: none;
} 
.scroll > ul > li ul.underlay li {
	display: inline-block;
	width: 80px;
	height: 100%;
	border-right: 1px solid black;
	box-shadow: 1px 0px 0px rgba(255,255,255,0.1);
	position: relative;
	color: rgba(0,0,0,0);
}
.scroll > ul > li ul.underlay li:last-child {
	box-shadow: none;
	border: none;
}
.scroll > ul > li ul.underlay li:nth-child(even) {
	background: rgba(0,0,0,0.15);
}
.scroll > ul > li ul.underlay li .temp, .scroll > ul > li ul.underlay li .clock {
	color: white;
	font-weight: bold;
	font-size: 10px;
	text-shadow: black 0px 1px 1px;
	position: absolute;
	display: block;
	width: 100%;
	bottom: 15px;
	text-align: center;
}
.scroll > ul > li ul.underlay li .temp span {
	font-family: HelveticaNeue-Light;
	font-weight: normal;
	color: rgba(255,255,255,0.5);
}
li ul.underlay li .temp em { 
	font-style: normal;
}
.scroll > ul > li ul.underlay li .clock {
	color: rgba(255,255,255,0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	width: 44px;
	bottom: auto;
	font-size: 8px;
	top: 15px;
	left: 50%;
	margin-left: -22px;
	height: 12px;
	line-height: 12px;
	text-shadow: none;
}
.forecast {
	width: 100%; 
	height: 100%; 
	background: -webkit-linear-gradient(-45deg, #fd9599 0%,#e09cc2 33%,#9bbcd5 71%,#7ac4d5 91%); 
	position:absolute; 
	top: 0px; 
	left: 0px; 
	box-shadow: rgba(0,0,0,0.35) 0px 4px 30px;
	z-index: -1;
	background: #ef7080;
	background: #C06C84;
	background: #79BD9A;
	background: #2EB8A1;
	/*background: #ff455e;*/
	background: #ffac1c;
	background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.1) 33%,rgba(0,0,0,0) 71%,rgba(0,0,0,0.2) 91%); 
	display: none;
	-webkit-transform: translate3d(0,0,0);
	border-radius: 14px;
	-webkit-transition: -webkit-transform 0.25s ease;
}
.forecast.slideout {
	-webkit-transform: translate3d(239px, 0, 0);
	box-shadow: 1px 0px 0px rgba(255,255,255,0.4) inset;
}

.forecast.active {
	-webkit-transform: translate3d(0,100%,0) scale(0.8) rotateY(70deg);
}

body.animate .slide {
	opacity: 0;
}
body.animate .slide.active {
	opacity: 1;
}
body.animate #box {
	-webkit-transform: translate3d(0, 0, 0);
}
body.animate .forecast.active {
	display: block;
}
body.animate .slide.active {
	display: block;
	background: transparent;
}

body.animate.build .weather .icon, body.animate.build .weather .info, body.animate.build .pagination, body.animate.build a.in, body.animate.build .slide .background, .forecast.active  {
	-webkit-transition-duration: 0.45s;
}

body.animate.build .weather .icon  {
	-webkit-transform: translate3d(0,-200px,0) perspective(120px) rotateX(60deg);
	opacity: 0;
}
body.animate.build .weather .info, body.animate.build .pagination  {
	-webkit-transform: translate3d(0,200px,0) perspective(120px) rotateX(-60deg);
	opacity: 0;
}
body.animate.build a.in, body.animate.build .slide .background {
	opacity: 0;
}
body.animate .slide .background {
	opacity: 0;
}

body.revealed .slide.active {
	opacity: 0;
}
body.revealed #box {
	-webkit-transform: translate3d(0, -100%, 0);
}
body.revealed .forecast.active {
	display: block;
	-webkit-transform: translate3d(0,0,0) scale(1);
	z-index: 1;
}

body.unbuild .forecast.active {
	-webkit-transform: translate3d(0,100%,0) scale(0.8);
}


@-webkit-keyframes 'up' {
	0% {
		-webkit-transform: translate3d(0,100%, 0);
	}
	100% {
		-webkit-transform: translate3d(0,0,0);
	}
}

.forecast .day {
	height: 100%;
	width: 25%;
	float: left;
	position: relative;
	box-shadow: rgba(0,0,0,0.35) 0px -1px 0px inset, rgba(0,0,0,0.5) 0px -20px 30px -10px inset;
}
.forecast .day:last-child {
	box-shadow: none;
}
.forecast .day:first-child {
	background: rgba(0,0,0,0.2);
}
.forecast .day:nth-child(2) {
	background: rgba(0,0,0,0.4);
	
}
.forecast .day:nth-child(3) {
	background: rgba(0,0,0,0.6);
}
.forecast .day:last-child {
	background: rgba(0,0,0,0.8);
}
.forecast .icon {
	width: 60px;
	height: 42px;
	background: url(canvas.png);
	background-position: 0px -418px;
	-webkit-transform: scale(0.6);
	display: block;
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -21px;
	z-index: 1;
}
.forecast::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 80px;
	bottom: 0px;
	left: 0px;
	top: 295px;
	background: rgba(0,0,0,0.05);
	border-right: 1px solid rgba(0,0,0,0.1);
	box-shadow: rgba(255,255,255,0.15) 1px 0px 0px;
}
.forecast .data {
	position: absolute;
	display: block;
	text-align: left;
	left: 80px;
	padding-left: 20px;
	right: 20px;
	height: 80px;
	line-height: 80px;
	top: 50%;
	margin-top: -40px;
	white-space:nowrap;
	overflow: hidden;
	font-size: 16px;
	font-weight: bold;
	color: white;
}
.forecast .data strong {
	position: absolute;
	height: 100%;
	right: 0px;
	text-align: right;
	display: block; 
	color: rgba(0,0,0,0.6);
	top: 0px;
}
.forecast .data span {
	color: white;
	display: inline-block;
	width: 50px;
	font-family: HelveticaNeue-Light;
	font-weight: normal;
}
.forecast .info span {
	color: rgba(255,255,255,0.6);
}
.forecast .info .con {
	display: block;
	margin-top: -34px;
	font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif;
	font-size: 11px;
}
.forecast .info .con span {
	font-family: HelveticaNeue-Light;
}
.forecast .icon.cloud, .forecast .icon.mostly_cloudy {
	height: 42px;
}
.forecast .icon.partlycloud, .forecast .icon.partly_sunny {
	height: 52px;
	background-position: -60px -418px;
	margin-top: -26px;
}
.forecast .icon.chance_of_storm {
	height: 70px;
	background-position: -120px -418px;
	margin-top: -35px;
}
.forecast .icon.showers, .forecast .icon.lightrainsun, .forecast .icon.sleetsun {
	height: 58px;
	background-position: -180px -418px;
	margin-top: -29px;
}
.forecast .icon.rain, .forecast .icon.mist, .forecast .icon.lightrain  {
	height: 50px;
	background-position: -240px -418px;
	margin-top: -25px;
}
.forecast .icon.snowsun {
	height: 62px;
	background-position: -300px -418px;
	margin-top: -31px;
}
.forecast .icon.storm {
	height: 52px;
	background-position: -360px -418px;
	margin-top: -26px;
}
.forecast .icon.rainthunder, .forecast .icon.snowthunder {
	height: 60px;
	background-position: -420px -418px;
	margin-top: -30px;
}
.forecast .icon.lightrainthundersun, .forecast .icon.sleetsunthunder, .forecast .icon.snowsunthunder, .forecast .icon.lightrainthunder, .forecast .icon.sleetthunder  {
	height: 66px;
	background-position: -480px -418px;
	margin-top: -33px;
}
.forecast .icon.snow, .forecast .icon.sleet, .forecast .icon.flurries, .forecast .icon.icy  {
	height: 54px;
	background-position: -540px -418px;
	margin-top: -27px;
}
.forecast .icon.fog, .forecast .icon.smoke, .forecast .icon.haze, .forecast .icon.dust {
	height: 40px;
	background-position: 0px -460px;
	margin-top: -20px;
}
.forecast .icon.sun, .forecast .icon.lightcloud, .forecast .icon.mostly_sunny {
	height: 60px;
	background-position: -240px -468px;
	margin-top: -30px;
}
.slide {
	position: absolute; 
	top: 0px; 
	left: 0px;
	width: 100%;
	height: 100%;
	background: black;
	overflow: hidden;
	z-index: 2;
}

#small .weather .icon, #small .info, #small .weather {
	-webkit-animation: none;
	-webkit-transition: none;
}
#small {
	display: none;
	background: black;
	height: 100%;
	overflow: hidden;
	width: 100%;
	position: absolute;
	top: 0px;
}
#small .slide {
	-webkit-transform: scale(0.5) translate3d(0,0,0);
	border: 4px solid black;
	box-sizing: border-box;
	-webkit-transition: border 0s ease;
}
#small .slide:nth-child(1) {
	border-left: none;
	border-top: none;
}
#small .slide:nth-child(2) {
	border-right: none;
	border-top: none;
}
#small .slide:nth-child(3) {
	border-left: none;
	border-bottom: none;
}
#small .slide:nth-child(4) {
	border-right: none;
	border-bottom: none;
}
#small .slide.non:nth-child(1) {
	-webkit-animation: one 0.4s ease both;
}
#small .slide.non:nth-child(2) {
	-webkit-animation: two 0.4s ease both;
	-webkit-animation-delay: 0.15s;
}
#small .slide.non:nth-child(3) {
	-webkit-animation: three 0.4s ease both;
	-webkit-animation-delay: 0.3s;
}
#small .slide.non:nth-child(4) {
	-webkit-animation: four 0.4s ease both;
	-webkit-animation-delay: 0.45s;
}
#small .slide.active {
	-webkit-animation: scaleout .25s ease;
	/*border: none;*/
	z-index: 21;
}
#small .slide.in {
	-webkit-animation: scalein 0.25s ease;
	border: none;
	z-index: 10;
}
@-webkit-keyframes 'scaleout' {
	0% {
		-webkit-transform: scale(1);	
	}
	100% {
		-webkit-transform: scale(0.5);
	}
}

@-webkit-keyframes 'one' {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5) translate3d(-200px, -200px, 0px);	
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0.5) translate3d(0px, 0px, 0px);	
	}
}
@-webkit-keyframes 'two' {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5) translate3d(200px, -200px, 0px);	
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0.5) translate3d(0px, 0px, 0px);	
	}
}
@-webkit-keyframes 'three' {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5) translate3d(-200px, 200px, 0px);	
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0.5) translate3d(0px, 0px, 0px);	
	}
}
@-webkit-keyframes 'four' {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.5) translate3d(200px, 200px, 0px);	
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0.5) translate3d(0px, 0px, 0px);	
	}
}

@-webkit-keyframes 'scalein' {
	0% {
		-webkit-transform: scale(0.5);	
	}
	100% {
		-webkit-transform: scale(1);
	}
}
.out #small {
	display: block;
}
.out #layer {
	-webkit-transition-duration: 0s;
}
.out #small .slide {
	background: transparent;
}
.out #small .slide .pagination {
	-webkit-transition: opacity 0.25s ease;
}
.out #small .slide .pagination {
	opacity: 0;
}
.out #small .slide.in .pagination {
	opacity: 1;
}
.out #small .slide:nth-child(1) {
	-webkit-transform-origin: 0% 0%!important;
}
.out #small .slide:nth-child(2) {
	-webkit-transform-origin: 100% 0%!important;
}
.out #small .slide:nth-child(3) {
	-webkit-transform-origin: 0% 100%!important;
}
.out #small .slide:nth-child(4) {
	-webkit-transform-origin: 100% 100%!important;
}

#slides {
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0px, 0px, 0px);
	-webkit-transition: -webkit-transform .250s ease-out;
	z-index: 9999;
	position: absolute;
	top: 0px;
	left: 0px;
}
a.show {
	text-decoration: none;
	-webkit-transition: -webkit-transform 0.4s ease;
	display: block;
	color: white;
	background: black;
	height: 44px;
	width: 44px;
	border-radius: 100px;
	position: absolute;
	z-index: 20;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	text-align: center;
	line-height: 44px;
	font-weight: bold;
}
a.show::after {
	content: '';
	position: absolute;
	display: block;
	height: 20px;
	width: 20px;
	left: 50%;
	background: url(canvas.png);
	background-position: 0px -500px;
	top: 50%;
	margin-top: -10px;
	margin-left: -10px;
}

@-webkit-keyframes glow {
	0% {
        -webkit-transform: scale(.1);   
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.1);   
        opacity: .9;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}


#small a.show.hide {
	display: none;
}
.settings #slides {
	-webkit-transform: translate3d(0px, -50%, 0px);
	box-shadow: rgba(0,0,0,0.8) 0px 20px 50px;
}
.settings.fadeout #slides {
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.settings #small {
	background: -webkit-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.5)), url(texture.jpg) repeat;
	background: #222;
}
.settings #small .slide {
	border-color: transparent;
	border-width: 0px;
}
.settings #small .slide .background {
	border-radius: 0px;
}
.settings #small .slide:nth-child(3) .background {
	border-bottom-left-radius: 14px;
}
.settings #small .slide:nth-child(4) .background {
	border-bottom-right-radius: 14px;
}
.settings #box {
	-webkit-transform: translate3d(-70%,0,0);
	-webkit-transition: -webkit-transform 0.25s ease;
	z-index: 100;
}
.settings #layer .slide {
	background: #222;
}
.settings #layer .slide .background, .settings #box {
	box-shadow: 10px 0px 110px rgba(0,0,0,0.65);
}
.settings.back #box {
	-webkit-transform: translate3d(0,0,0);
}
.settings #settings {
	display: block;
}

a.back {
    border: solid #fff;
    border-width: 1px 1px 1px 0;
    border-radius: 0 5px 5px 0;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    margin-left: 20px;
    margin-right: 2px;
    padding: 0 7px 0 3px;
    position: relative;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 3px;
    -webkit-transform: translate3d(0,0,0);
    z-index: 10;
}

a.back:before {
    border: solid #fff;
    border-width: 0 0 1px 1px;
    border-radius: 2px 0 2px 2px;
    content: '';
    display: block;
    height: 21px;
    left: -11px;
    position: absolute;
    top: 3px;
    -webkit-transform: rotate(45deg);
    width: 21px;
    z-index: -1;
}

a.back.touchdown {
    border-color: #fff;
    background: #fff;
}

a.back.touchdown:before {
    border-color: #fff;
    background: #fff;
}

a.back span {
    position: relative;
}

a.back.touchdown span {
    color: inherit;
}

/*.out .slide, .slide.out {
	-webkit-transform-style: preserve-3d; 
	-webkit-transition-property: -webkit-transform; 
	-webkit-transition-duration: 200ms; 
	-webkit-transition-timing-function: ease-out; 
	-webkit-transition-delay: initial;
	-webkit-transform: scaleX(0.4924) scaleY(0.496)!important;
	background: transparent;
}
.slide.out {
	height: 100%;
	z-index: 100;
	-webkit-transform: scale(1)!important;
}
.out .slide.active {
	-webkit-transform: scale(0.6)!important;
	z-index: 7;
	box-shadow: rgba(0,0,0,0.3) 40px 50px 60px;
	border-radius: 28px;
}*/
/*.out .slide.active .info {
	font-size: 27px;
	background: #333;
	width: 170px;
	margin: 50px auto;
	color: #ff455e;
	padding: 24px;
	border-radius: 178px;
	border: 1px solid #000;
	box-shadow: black 0px 11px 10px -10px inset;
}
.out .slide.active .info span {
	display: none;
}*/
/*.out #layer {
	-webkit-transform: translate3d(0,0,0)!important;
	-webkit-transition: none;
}
.out #layer.out {
	-webkit-transition: none;
}
.out .slide .pagination {
	display: none;
}
.out .slide .background {
	border-radius: 28px;
}
.out .slide.out .background {
	border-radius: 14px;
}
.out .slide:nth-child(1) {
	-webkit-transform-origin: 0% 0%!important;
}
.out .slide:nth-child(2) {
	-webkit-transform-origin: 100% 0%!important;
}
.out .slide:nth-child(3) {
	-webkit-transform-origin: 0% 100%!important;
}
.out .slide:nth-child(4) {
	-webkit-transform-origin: 100% 100%!important;
}*/
@-webkit-keyframes bobs {
	0% {
		-webkit-filter: blur(20px);
	}
	100% {
		-webkit-filter: blur(0px);
	}
}
.slide.beneath {
	box-shadow: rgba(0,0,0,0.75) 0px 10px 40px;
}
.slide .reveal {
	position: absolute;
	width: 100%;
	height: 51%;
	left: 0px;
	top: 0px;
	-webkit-transition: -webkit-transform .250s ease-out;
	/*box-shadow: rgba(0,0,0,0.5) 0px 20px 30px -10px;*/
	background-size: 100% 196%;
	-webkit-transform: translate3d(0,0,0);
}
.slide .reveal:nth-child(2) {
	top: 51%;
	height: 49%;
	background-size: 100% 204%;
	background-position: bottom;
}
.slide.transparent {
	background: transparent;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) { 
	.slide .reveal {
		height: 49%;
		background-size: 100% 204%;
	}
	.slide .reveal:nth-child(2) {
		height: 51%;
		top: 49%;
		background-size: 100% 196%;
	}
}
@media only screen and (max-device-width: 1024px) and (orientation: landscape) { 
	.slide .reveal {
		height: 52%;
		background-size: 100% 192%;
	}
	.slide .reveal:nth-child(2) {
		height: 48%;
		top: 52%;
		background-size: 100% 208%;
	}
}

/* @themes */

.slide .background {
	position: absolute;
	background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.1) 33%,rgba(255,255,255,0.05) 71%,rgba(255,255,255,0.01) 91%);
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	-webkit-transition: all .250s ease-out;
	/*-webkit-transition: opacity .250s ease-out;*/
}

/* @theme "sunnyside" */
.sunnyside .slide:nth-child(1) .background, span.sunnyside:nth-child(1) {
	background-color: #ff455e;
}
.sunnyside .slide:nth-child(2) .background, .sunnyside .cities li:nth-child(1) span, span.sunnyside:nth-child(2) {
	background-color: #2EB8A1;
}
.sunnyside .slide:nth-child(3) .background, .sunnyside .cities li:nth-child(2) span, span.sunnyside:nth-child(3) {
	background-color: #6C5B7B;
}
.sunnyside .slide:nth-child(4) .background, .sunnyside .cities li:nth-child(3) span, span.sunnyside:nth-child(4) {
	background-color: #355C7D;
	background-color: #ffac1c;
}

/* @theme "Adrift" */
.adrift .slide:nth-child(1) .background, span.adrift:nth-child(1) {
	background-color: #0B486B;
}
.adrift .slide:nth-child(2) .background, .adrift .cities li:nth-child(1) span, span.adrift:nth-child(2) {
	background-color: #3B8686;
}
.adrift .slide:nth-child(3) .background, .adrift .cities li:nth-child(2) span, span.adrift:nth-child(3) {
	background-color: #79BD9A;
}
.adrift .slide:nth-child(4) .background, .adrift .cities li:nth-child(3) span, span.adrift:nth-child(4) {
	background-color: #A8DBA8;
}

/* @theme "pastels" */
.pastels .slide:nth-child(1) .background, span.pastels:nth-child(1) {
	background-color: #F67280;
}
.pastels .slide:nth-child(2) .background, .pastels .cities li:nth-child(1) span, span.pastels:nth-child(2) {
	background-color: #C06C84;
}
.pastels .slide:nth-child(3) .background, .pastels .cities li:nth-child(2) span, span.pastels:nth-child(3) {
	background-color: #5B7880;
}
.pastels .slide:nth-child(4) .background, .pastels .cities li:nth-child(3) span, span.pastels:nth-child(4) {
	background-color: #355C7D;
}

/* @theme "Stardust" */
.stardust .slide:nth-child(1) .background, span.stardust:nth-child(1) {
	background-color: #4c4d55;
}
.stardust .slide:nth-child(2) .background, .stardust .cities li:nth-child(1) span, span.stardust:nth-child(2) {
	background-color: #6e6f79;
}
.stardust .slide:nth-child(3) .background, .stardust .cities li:nth-child(2) span, span.stardust:nth-child(3) {
	background-color: #888995;
}
.stardust .slide:nth-child(4) .background, .stardust .cities li:nth-child(3) span, span.stardust:nth-child(4) {
	background-color: #9ea0b0;
}

/* @theme "Looper" */
.looper .slide:nth-child(1) .background, span.looper:nth-child(1) {
	background-color: #6abfb3;
}
.looper .slide:nth-child(2) .background, .looper .cities li:nth-child(1) span, span.looper:nth-child(2) {
	background-color: #9b5a65;
}
.looper .slide:nth-child(3) .background, .looper .cities li:nth-child(2) span, span.looper:nth-child(3) {
	background-color: #798072;
}
.looper .slide:nth-child(4) .background, .looper .cities li:nth-child(3) span, span.looper:nth-child(4) {
	background-color: #648acb;
}

/* @theme "goldfish" */
.goldfish .slide:nth-child(1) .background, span.goldfish:nth-child(1) {
	background-color: #69D2E7;
}
.goldfish .slide:nth-child(2) .background, .goldfish .cities li:nth-child(1) span, span.goldfish:nth-child(2) {
	background-color: #A7DBD8;
}
.goldfish .slide:nth-child(3) .background, .goldfish .cities li:nth-child(2) span, span.goldfish:nth-child(3) {
	background-color: #E0E4CC;
}
.goldfish .slide:nth-child(4) .background, .goldfish .cities li:nth-child(3) span, span.goldfish:nth-child(4) {
	background-color: #F38630;
}

/* @theme "goldfish" */
.goldfish .slide:nth-child(1) .background, span.goldfish:nth-child(1) {
	background-color: #69D2E7;
}
.goldfish .slide:nth-child(2) .background, .goldfish .cities li:nth-child(1) span, span.goldfish:nth-child(2) {
	background-color: #7cc2be;
}
.goldfish .slide:nth-child(3) .background, .goldfish .cities li:nth-child(2) span, span.goldfish:nth-child(3) {
	background-color: #b7c188;
}
.goldfish .slide:nth-child(4) .background, .goldfish .cities li:nth-child(3) span, span.goldfish:nth-child(4) {
	background-color: #F38630;
}

/* @theme "moon" */
.moon .slide:nth-child(1) .background, span.moon:nth-child(1) {
	background-color: #F14D6F;
}
.moon .slide:nth-child(2) .background, .moon .cities li:nth-child(1) span, span.moon:nth-child(2) {
	background-color: #BD4363;
}
.moon .slide:nth-child(3) .background, .moon .cities li:nth-child(2) span, span.moon:nth-child(3) {
	background-color: #8A3857;
}
.moon .slide:nth-child(4) .background, .moon .cities li:nth-child(3) span, span.moon:nth-child(4) {
	background-color: #562E4A;
}

/* @theme "Envious" */
.envious .slide:nth-child(1) .background, span.envious:nth-child(1) {
	background-color: #0B9CB6;
}
.envious .slide:nth-child(2) .background, .envious .cities li:nth-child(1) span, span.envious:nth-child(2) {
	background-color: #1A7795;
}
.envious .slide:nth-child(3) .background, .envious .cities li:nth-child(2) span, span.envious:nth-child(3) {
	background-color: #295376;
}
.envious .slide:nth-child(4) .background, .envious .cities li:nth-child(3) span, span.envious:nth-child(4) {
	background-color: #372E53;
}

/* @theme "gordon" */
.gordon .slide .background {
	background-size: cover;
	background-position-x: -150px;
}
.gordon .slide:nth-child(1) .background, span.gordon:nth-child(1) {
	background-image: url(j1.jpg);
	background-color: #94d3c2;
}
.gordon .slide:nth-child(2) .background, .gordon .cities li:nth-child(1) span, span.gordon:nth-child(2) {
	background-image: url(j2.jpg);
	background-color: #4b3d23;
}
.gordon .slide:nth-child(3) .background, .gordon .cities li:nth-child(2) span, span.gordon:nth-child(3) {
	background-image: url(j3.jpg);
	background-color: #e4c257;
}
.gordon .slide:nth-child(4) .background, .gordon .cities li:nth-child(3) span, span.gordon:nth-child(4) {
	background-image: url(j4.jpg);
	background-color: #844029;
}

/* @theme "pansage" - it's a freakin' pokemon! */
.pansage .slide:nth-child(1) .background, span.pansage:nth-child(1) {
	background-color: #ffac1c;
	
}
.pansage .slide:nth-child(2) .background, .pansage .cities li:nth-child(1) span, span.pansage:nth-child(2) {
	background-color: #1f8c92;
}
.pansage .slide:nth-child(3) .background, .pansage .cities li:nth-child(2) span, span.pansage:nth-child(3) {
	background-color: #10c795;
}
.pansage .slide:nth-child(4) .background, .pansage .cities li:nth-child(3) span, span.pansage:nth-child(4) {
	background-color: #0d7561;
}

/* @theme "xxx" */
/* .xxx .slide:nth-child(1) .background, span.xxx:nth-child(1) {
	background-color: #HASH;
}
.xxx .slide:nth-child(2) .background, .xxx .cities li:nth-child(1) span, span.xxx:nth-child(2) {
	background-color: #HASH;
}
.xxx .slide:nth-child(3) .background, .xxx .cities li:nth-child(2) span, span.xxx:nth-child(3) {
	background-color: #HASH;
}
.xxx .slide:nth-child(4) .background, .xxx .cities li:nth-child(3) span, span.xxx:nth-child(4) {
	background-color: #HASH;
}*/


/* Preview app site */
body.preview {
	margin: 0px;
	padding: 0px;
	font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
	background: #8ba987;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
body.preview #app {
	position: absolute;
	width: 550px;
	height: 550px;
	top: 50%;
	left: 50%;
	margin-top: -275px;
	margin-left: -275px;
}
body.preview h1 {
	margin: 0px;
	margin-top: 109px;
	line-height: 1;
	font-size: 60px;
	color: rgba(255,255,255,0.8);
	padding-bottom: 14px;
	margin-bottom: 17px;
	border-bottom: 1px solid rgba(255,255,255,0.4);
	width: 272px;
	-webkit-animation: fadeInSmall 0.5s ease;
	-moz-animation: fadeInSmall 0.5s ease;
}
body.preview p {
	margin: 0px;
	font-size: 30px;
	font-family: HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	color: rgba(255,255,255,0.8);
	width: 272px;
	-webkit-animation: fadeInSmall 0.5s ease both;
	-webkit-animation-delay: 0.3s;
	-moz-animation: fadeInSmall 0.5s ease both;
	-moz-animation-delay: 0.3s;
}
body.preview p em {
	font-style: normal;
	display: block;
}
body.preview #more {
	border: 1px solid rgba(255,255,255,0.8);
	text-decoration: none;
	color: rgba(255,255,255,0.8);
	font: 18px HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	padding: 0px;
	height: 40px;
	width: 105px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	border-radius: 200px;
	margin-top: 23px;
	-webkit-transition: all 0.2s ease-out;
	-webkit-animation: fadeInSmall 0.5s ease both;
	-webkit-animation-delay: 0.6s;
	-moz-transition: all 0.2s ease-out;
	-moz-animation: fadeInSmall 0.5s ease both;
	-moz-animation-delay: 0.6s;
}
body.preview #more:hover {
	background: #fff;
	color: #637164;
}
body.preview .photo {
	background: url(iphone.jpg);
	width: 1140px;
	height: 780px;
	position: absolute;
	left: 50%;
	margin-left: -570px;
	top: 0px;
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation: bounceInRight 1s ease both;
	-moz-animation: bounceInRight 1s ease both;
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
	z-index: -1;
}
body.preview .overlay {
	display: none;
	background: black;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(0,0,0,0.4);
	background: -webkit-radial-gradient(circle, rgba(100,100,100,0.35), rgba(0,0,0,0.6));
	background: -moz-radial-gradient(circle, rgba(100,100,100,0.35), rgba(0,0,0,0.6));
	-webkit-animation: fade 0.4s ease-in-out;
	-moz-animation: fade 0.4s ease-in-out;
}
body.preview .overlay.up {
	-webkit-animation: fadeout 0.4s ease-in-out both;
	-moz-animation: fadeout 0.4s ease-in-out both;
}
body.preview .overlay .wrapper {
	width: 420px;
	padding: 40px;
	box-sizing: border-box;
	border-radius: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -210px;
	margin-top: -201px;
	box-shadow: rgba(0,0,0,0.4) 0px 0px 200px inset;
	-webkit-animation: bounceInDown 0.6s ease both;
	-moz-animation: bounceInDown 0.6s ease both;
	background-color: #373731;
}
body.preview .overlay.up .wrapper {
	-webkit-animation: bounceInUp 0.6s ease both;
	-moz-animation: bounceInUp 0.6s ease both;
}
body.preview .overlay p {
	color: #f7f7e2;
	font-size: 18px;
	margin-bottom: 5px;
	line-height: 1.8;
	width: auto;
}
body.preview .overlay .wrapper small {
	color: #f7f7e2;
	color: rgba(247, 247, 226, 0.3);
	margin-top: -5px;
}
body.preview .overlay .wrapper small a {
	color: #f7f7e2;
	color: rgba(247, 247, 226, 0.5);
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
}
body.preview .overlay .wrapper small a:hover {
	color: rgba(247, 247, 226, 0.8);
	text-decoration: underline;
}
body.preview .overlay h2 {
	color: #f7f7e2;
	margin: 0 0px 10px;
	font: normal 30px HelveticaNeue-Light, Helvetica, Arial, sans-serif;
}
body.preview .overlay h2 strong {
	font-weight: bold;
	font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
}
body.preview.install {
	background: #23231f;
}
#install {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
#homescreen {
	background: url(/themes/default/mobile/static/images/apple114.png);
	background-size: 114px 114px;
	border-radius: 20px;
	height: 114px;
	width: 114px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -57px;
	margin-left: -57px;
	box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, #636a82 0px 143px 109px, rgba(0,0,0,0.5) 0px 57px 30px;
	box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(0,0,0,0.5) 0px 31px 30px, #636a82 0px 103px 109px;
	border: 1px solid rgba(0, 0, 0, 0.55);
	box-sizing: border-box;
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation: posh 1s ease both;
}
#homescreen span {
	font-size: 18px;
	line-height: 114px;
	text-align: center;
	position: absolute;
	font-weight: bold;
	color: #11b2a1;
	top: 0px;
	left: 4px;
	width: 100%;
	height: 100%;
}
#add {
	position: absolute;
	width: 320px;
	bottom: -50px;
	left: 50%;
	text-align: center;
	font-family: HelveticaNeue-Light, Helvetica;
	font-weight: normal;
	color: rgba(247, 247, 226, 0.4);
	font-size: 14px;
	margin: 0px;
	margin-left: -160px;
	-webkit-animation: fadeInSmall 0.5s ease both;
	-webkit-animation-delay: 0.4s;
}
#add strong {
	font-family: HelveticaNeue, Helvetica;
	font-weight: bold;
	color: rgba(247, 247, 226, 0.6);
}

/* Retina / @2x */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.pagination span:first-child, .pagination span.active:first-child, .loading, .weather .icon, .forecast .icon, #settings .cities li::after, #settings li.current::after, .notification .left, #small a.show::after, a.in::after, .credits li span  {
		background-image: url(canvas@2x.png);
		background-size: 600px 574px;
	}
	body.preview .photo {
		background: url(iphone@2x.jpg);	
		background-size: 1140px 780px;
	}
}

/* Device specifics queries */
@media only screen and (max-device-width: 480px) and (orientation:landscape)  {
	.pagination {
		bottom: 15px;
	}
	.info {
		margin-top: 25px;
	}
	.slide .reveal {
		height: 60%;
		background-size: 100% 166%;
	}
	.slide .reveal:nth-child(2) {
		top: 60%;
		height: 40%;
		background-size: 100% 250%;
	}
}
@media only screen and (max-device-width: 480px)  {
	/*.forecast {
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
		margin: 0px;
		border-radius: 0px;
	}*/
	.forecast .day:first-child, .forecast .day:nth-child(4) {
		border-radius: 0px;
	}
	.slide .reveal {
		height: 60%;
		background-size: 100% 166%;
	}
	.slide .reveal:nth-child(2) {
		top: 60%;
		height: 40%;
		background-size: 100% 250%;
	}
	.forecast .day:after {
		content: '';
		background: rgba(0,0,0,0.15);
		box-shadow: rgba(0,0,0,0.35) -1px 0px 0px inset, -15px 0px 15px -15px rgba(0,0,0,0.4) inset;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100px;
		height: 100%;
	}
	.forecast .day {
		height: 25%;
		width: 100%;
		float: none;
		box-shadow: rgba(0,0,0,0.35) 0px -1px 0px inset;
	}
	.popup {
		margin: 0px;
		top: 50px;
	}
	.popup h2 {
		padding: 0 0 10px;
		margin: 10px 0;
	}
	.notification {
		top: 0px;
	}
}

/* Animations */
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: scale(1);
		opacity: 0.6;
	}
	50% {
		-webkit-transform: scale(1.5);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 0.6;
	}
}
@-webkit-keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes up {
	0% {
		-webkit-transform: translateY(0px);
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
}
@-webkit-keyframes down {
	0% {
		-webkit-transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}

@-webkit-keyframes fadeInSmall {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-15px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@-webkit-keyframes fadeUpSmall {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-15px);
	}
}
@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}
	
	60% {
		opacity: 1;
	}
	
	80% {
		-webkit-transform: translateX(10px);
	}
	
	100% {
		-webkit-transform: translateX(0);
	}
}
@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
	}
	
	100% {
		-webkit-transform: translateY(0);
	}
}
@-webkit-keyframes bounceInUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
	
	60% {
		opacity: 0;
	}
	
	100% {
		-webkit-transform: translateY(-2000px);
	}
}
@-webkit-keyframes posh {
    0% {
        -webkit-transform: translateY(-500px) scale(1.9);
        opacity: 0;
    }
    50% {
    	-webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-moz-keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-moz-keyframes fadeInSmall {
	0% {
		opacity: 0;
		-moz-transform: translateY(-15px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}
@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}
	
	60% {
		opacity: 1;
	}
	
	80% {
		-moz-transform: translateX(10px);
	}
	
	100% {
		-moz-transform: translateX(0);
	}
}
@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
	}
	
	100% {
		-moz-transform: translateY(0);
	}
}
@-moz-keyframes bounceInUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(0px);
	}
	
	60% {
		opacity: 0;
	}
	
	100% {
		-moz-transform: translateY(-2000px);
	}
}